/*
 * @Author: duchengdong
 * @Date: 2024-03-11 23:21:25
 * @LastEditors: duchengdong
 * @LastEditTime: 2024-03-13 22:17:54
 * @Description:
 */
import {View, Text, ScrollView, Dimensions} from 'react-native'
import React, {useState, useEffect, useRef} from 'react'
import {StyleSheet} from 'react-native'
import {formatDateTime} from '../..//utils'
import {infoColor, successColor, warningColor, errorColor} from '../../global'
import {ButtonGroup} from '@rneui/themed'
// import {LineChart} from 'react-native-gifted-charts'
import * as echarts from 'echarts/core'
import {LineChart} from 'echarts/charts'
import {GridComponent} from 'echarts/components'
import {SVGRenderer, SvgChart} from '@wuba/react-native-echarts'

echarts.use([SVGRenderer, LineChart, GridComponent])

const style = StyleSheet.create({
	container: {
		padding: 10,
		height: '100%',
		backgroundColor: '#fff',
	},
	dateTime: {
		color: infoColor,
		marginBottom: 12,
		fontSize: 20,
	},
})

const E_HEIGHT = 400
const E_WIDTH = Dimensions.get('screen').width

function calcTime(len = 10) {
	let now = new Date()
	let res = []
	while (len--) {
		res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
		now = new Date(+now - 5000)
	}
	return res
}

function calcValue(len = 10) {
	let res = []
	while (len--) {
		res.push(Math.round(Math.random() * 60 + 60))
	}
	return res
}

export default function Detail() {
	const [selectedIndex, setSelectedIndex] = useState(0)
	const svgRef = useRef(null)
	const [chart, setChart] = useState(null)
	useEffect(() => {
		const option = {
      tooltip: {
        trigger: 'axis',
      },
			xAxis: {
				type: 'category',
				data: calcTime(60),
        boundaryGap: false,
			},
			yAxis: {
				type: 'value',
				scale: true,
				name: '距离/cm',
				max: 140,
				min: 20,
				boundaryGap: [0.2, 0.2],
			},
			series: [
				{
					data: calcValue(60),
					type: 'line',
					smooth: true,
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
				},
			],
		}
		let chart
		if (svgRef.current) {
			chart = echarts.init(svgRef.current, 'light', {
				renderer: 'svg',
				width: E_WIDTH,
				height: E_HEIGHT,
			})
			chart.setOption(option)
		}
		setChart(chart)
		return () => chart?.dispose()
	}, [])

	const changeType = type => {
		if (type == selectedIndex) return
		setSelectedIndex(type)
		let categories = []
		let data = []
		if (type == 0) {
			categories = calcTime(60)
			data = calcValue(60)
		}
		if (type == 1) {
			categories = calcTime(120)
			data = calcValue(120)
		}
		if (type == 2) {
			categories = calcTime(180)
			data = calcValue(180)
		}
		chart.setOption({
			xAxis: [{data: categories}],
			series: [{data: data}],
		})
	}

	return (
		<ScrollView style={style.container}>
			<View style={{marginBottom: 20}}>
				<View>
					<Text style={style.dateTime}>{formatDateTime()}</Text>
				</View>
				<View>
					<Text style={{fontSize: 18, color: '#333'}}>
						佩戴距离：<Text style={{fontSize: 26, color: successColor}}>82.9</Text>cm
					</Text>
				</View>
			</View>
			<View>
				<ButtonGroup
					buttons={['日', '月', '年']}
					selectedIndex={selectedIndex}
					onPress={value => {
						changeType(value)
					}}
				/>
			</View>
			<View>
				<SvgChart ref={svgRef}></SvgChart>
			</View>
		</ScrollView>
	)
}
